<template>
  <div>
    <h2>门诊病历首页</h2>
    <el-form ref="medicalRecordForm" :model="medicalRecord" label-width="120px" label-position="left" size="small">
      <el-row style="background-color: #EAF1F5;margin-top: -20px">
        <el-col :span="8" style="margin-top: 4px;">
          <!-- 预留 -->
        </el-col>
        <el-col :span="4">
          <el-button type="text" size="small" @click="stageCheck">暂存</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="text" size="small" @click="saveCheck">提交</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="text" size="small" :disabled="isSaved" @click="cleanCheck">清空所有</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="text" size="small" @click="refMedicalRecord">刷新</el-button>
        </el-col>
      </el-row>
      <el-tag>病史内容：</el-tag>
      <el-form-item label="主诉">
        <el-input type="textarea" :rows="1" v-model="medicalRecord.readme" :disabled="isSaved"></el-input>
      </el-form-item>
      <el-form-item label="现病史">
        <el-input type="textarea" :rows="2" v-model="medicalRecord.present" :disabled="isSaved"></el-input>
      </el-form-item>
      <el-form-item label="现病治疗情况">
        <el-input type="textarea" :rows="2" v-model="medicalRecord.presenttreat" :disabled="isSaved"></el-input>
      </el-form-item>
      <el-form-item label="既往史">
        <el-input type="textarea" :rows="2" v-model="medicalRecord.history" :disabled="isSaved"></el-input>
      </el-form-item>
      <el-form-item label="过敏史">
        <el-input type="textarea" :rows="2" v-model="medicalRecord.allergy" :disabled="isSaved"></el-input>
      </el-form-item>
      <el-form-item label="体格检查">
        <el-input type="textarea" :rows="2" v-model="medicalRecord.physique" :disabled="isSaved"></el-input>
      </el-form-item>
      <el-form-item label="诊断">
        <el-input type="textarea" :rows="2" v-model="medicalRecord.diagnosis" :disabled="isSaved"></el-input>
      </el-form-item>
      <el-form-item label="检查建议">
        <el-input type="textarea" :rows="2" v-model="medicalRecord.proposal" :disabled="isSaved"></el-input>
      </el-form-item>
      <el-form-item label="注意事项">
        <el-input type="textarea" :rows="2" v-model="medicalRecord.careful" :disabled="isSaved"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="text" size="small" @click="saveCheck">提交</el-button>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import service from '@/utils/request'
import { ElNotification } from 'element-plus'

const medicalRecordForm = ref(null)
const medicalRecord = ref({
  readme: '',
  present: '',
  presenttreat: '',
  history: '',
  allergy: '',
  physique: '',
  diagnosis: '',
  proposal: '',
  careful: ''
})
const isSaved = ref(false)

// 暂存病历
function stageCheck() {
  medicalRecord.casestate = 1
  saveMedicalRecord()
}

// 提交病历
function saveCheck() {
  medicalRecord.casestate = 2
  saveMedicalRecord()
}

// 保存病历到后端
function saveMedicalRecord() {
  service.post('/medicalrecord/add', medicalRecord.value).then(res => {
    if (res.data) {
      ElNotification({
        title: '成功',
        message: '病历保存成功',
        type: 'success'
      })
      isSaved.value = true
    } else {
      ElNotification({
        title: '失败',
        message: '病历保存失败，请重试',
        type: 'error'
      })
    }
  }).catch(error => {
    console.error('保存病历请求出错:', error)
    ElNotification({
      title: '错误',
      message: '保存病历请求出错，请检查网络或联系管理员',
      type: 'error'
    })
  })
}

// 清空所有表单数据
function cleanCheck() {
  medicalRecord.value = {
    readme: '',
    present: '',
    presenttreat: '',
    history: '',
    allergy: '',
    physique: '',
    diagnosis: '',
    proposal: '',
    careful: ''
  }
  isSaved.value = false
}

// 刷新病历数据
function refMedicalRecord() {
  // 这里可以添加刷新数据的逻辑，例如重新从后端获取数据
  console.log('刷新病历数据')
}

onMounted(() => {
  // 可以在这里添加初始化数据的逻辑，例如从后端获取已有病历数据
})
</script>